import React, { useState } from "react";
import { Modal } from "../components";

export const FooterDemo = () => {
  const [open, setOpen] = useState<string>("");

  return (
    <>
      <div>
        <div className="primary-btn" onClick={() => setOpen("node")}>
          fotter自定义
        </div>
        <div
          style={{ marginLeft: 12 }}
          className="primary-btn"
          onClick={() => setOpen("text")}
        >
          自定义文字
        </div>
        <div
          style={{ marginLeft: 12 }}
          className="primary-btn"
          onClick={() => setOpen("hide")}
        >
          隐藏footer
        </div>
      </div>
      <Modal
        title="Modal Title"
        open={open === "node"}
        onClose={() => setOpen("")}
        onConfirm={() => {
          console.log("onConfirm");
          setOpen("");
        }}
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <div className="btn" onClick={() => setOpen("")}>
              自定义一个按钮
            </div>
          </div>
        }
      >
        弹窗内容
        <div>show everything you want here</div>
      </Modal>

      <Modal
        title="Modal Title"
        open={open === "text"}
        onClose={() => setOpen("")}
        onConfirm={() => {
          console.log("onConfirm");
          setOpen("");
        }}
        confirmText="自定义确认"
        closeText="自定义关闭"
      >
        弹窗内容
        <div>show everything you want here</div>
      </Modal>
      <Modal
        title="Modal Title"
        open={open === "hide"}
        onClose={() => setOpen("")}
        onConfirm={() => {
          console.log("onConfirm");
          setOpen("");
        }}
        footer={null}
      >
        footer设置为null，隐藏footer
      </Modal>
    </>
  );
};
